<template>
  <div>
    <h1>App</h1>
    info.age: {{ info.age }}
    <button @click="info.age++">info.age++</button>
    <hr>
    age: {{ age }}
    <button @click="age++">age++</button>

    <hr>
    newInfo.age.value {{ newInfo.age }}
    <button @click="newInfo.age.value++">newInfo.age.value++</button>
  </div>
</template>
<script setup>
import { reactive, toRef, toRefs } from 'vue';

const info = reactive({
  age: 20,
  money: 1000
});
const age = toRef(info, 'age');//ref
console.log(info.age, age.value);

const newInfo = toRefs(info);
// const newInfo = {
//   age: toRef(info, 'age'),
//   money: toRef(info, 'money')
// }
console.log(newInfo.age.value);


</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>